<template>
	<view :id="success ? 'appbw' : 'app'">
		<uni-transition :mode-class="['fade']" :show="!success">
			<!-- 立即购买 -->
			<view class="site area mt30 mlr30 pt30">
				<!-- 内容 -->
				<view class="rows plr30" @click="selSite">

					<!-- 地址 -->
					<view class="site" v-if="wrap.address && wrap.address.id">
						<!-- 用户 -->
						<view class="user df aic c333 f30">
							<view class="name w150 thd">{{wrap.address.name}}</view>
							<view class="phone">{{wrap.address.mobile}}</view>
						</view>
						<!-- 年龄 -->
						<view class="info mt20 c999 f28">{{wrap.address.area}}{{wrap.address.detail}}</view>
					</view>

					<!-- 增加地址 -->
					<view class="addSite df aic" v-if="!wrap.address && !wrap.address.id">
						<view class="icon">
							<uni-icons type="plus" color="#333" size="20"></uni-icons>
						</view>
						<view class="txt ml10 c333 f32">添加地址</view>
					</view>
					<!-- 更多 -->
					<view class="more">
						<uni-icons type="arrowright" size="20" color="#666"></uni-icons>
					</view>

				</view>
				<!-- 条 -->
				<view class="bar mt30">
					<image src="/static/payBar.png" mode="widthFix"></image>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="area mt30 mlr30 plr25 bw">
				<!-- 商家 -->
				<view class="rows ptb20 f28 bdb1se">
					<view class="col df f1">
						<!-- 商家头像 -->
						<view class="proImg wh40">
							<image :src="wrap.userData.shop_logo" mode="aspectFill"></image>
						</view>
						<!-- 商家名称 -->
						<view class="txt ml10 c333">{{wrap.userData.shop_name}}</view>
					</view>
				</view>

				<!-- 订单信息 -->
				<view class="proInfo df ais ptb35 bdb1se">
					<!-- 商品图片 -->
					<view class="proImg wh160">
						<image :src="wrap.images[0]" mode="aspectFill"></image>
					</view>

					<!-- 商品内容 -->
					<view class="wrap oh df dfc dfsb ml20 f1">
						<!-- 名称 -->
						<view class="name t2hd c333 f32">{{wrap.name}}</view>
						<!-- 信息 -->
						<view class="rows">
							<!-- 价格 -->
							<view class="integral">
								<view class="cFF9646 f32">￥{{wrap.price}}</view>
							</view>
							<!-- 计算金额 -->
							<calculate v-model="num" />
						</view>
					</view>
				</view>

				<!-- 备注 -->
				<view class="rows ais ptb30">
					<view class="txt c666 f32 wsn">备注</view>
					<view class="remark f1 ml20">
						<textarea class="txtplus f32" v-model="wrap.remark" placeholder="请填写备注" />
					</view>
				</view>
			</view>

			<!-- 底部支付 -->
			<view class="footer rows ptb20 plr30 bw">
				<!-- 价格 -->
				<view class="price lh40 c666 f32">
					<text class="cFF9646 f32">合计：￥{{wrap.price * num}}</text>
				</view>
				<!-- 支付 -->
				<view class="pay" @click="pay">
					<view class="btn pay w250">立即支付</view>
				</view>
			</view>
		</uni-transition>

		<uni-transition class="pf t0 w100p" :modeClass="['fade']" :show="success">
			<!-- 结果 -->
			<view class="result df dfc aic mt10p">
				<!-- 图 -->
				<view class="img wh160">
					<image src="/static/success.png" mode="aspectFit"></image>
				</view>

				<view class="txt mt60 c333 f40 fwb">下单成功</view>

				<view class="mt30 c999 f28">您可以在我的订单中查看详情</view>

				<!-- 操作框 -->
				<view class="fnArea df aic mt70">
					<navigator url="/pages/task/taskindex" open-type="reLaunch" class="btn usual w250"
						hover-class="none">再去逛逛</navigator>
					<navigator url="/pages/my/order/order" open-type="redirect" class="btn prmary w250 ml30"
						hover-class="none">查看订单
					</navigator>
				</view>
			</view>
		</uni-transition>
	</view>
</template>
<script>
	// 定义全局变量that
	var that;

	// 计算金额
	import calculate from '@/components/calculate.vue';

	export default {
		// 组件声明
		components: {
			// 计算金额
			calculate,
		},

		// 页面变量
		data() {
			return {
				// 内容
				wrap: {
					// 地址
					// address: {},
					// 备注
					remark: '',
				},
				// 金额
				num: 1,
				// 是否提交
				success: false,
				// id
				id: '',
				pays: false,
				orderid: ''
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 商品id
			e.id ? that.id = e.id : '';

			// 获取商品信息
			that.getWrap();

			// 赋值备注	
			that.wrap.remark = '备注';
			// 半秒后执行
			setTimeout(() => {
				// 赋值备注	
				that.wrap.remark = '';
			}, 5);
		},

		// 页面出现
		onShow() {
			// 判断是否有地址缓存
			if (uni.getStorageSync('site')) {
				// 赋值地址
				that.wrap.address = uni.getStorageSync('site');
				// 清除缓存
				uni.removeStorageSync('site');
				// 重新赋值刷新页面
				that.wrap = Object.assign({}, that.wrap);

			};
		},

		// 方法集
		methods: {
			// 获取默认地址
			getDefaultSite() {
				// 请求接口 
				that.request({
					url: '/api/user_Address/getAddress',
					data: {
						status: 2,
					},
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值地址信息
							that.wrap.address = rs.data;

							// 重新赋值刷新页面
							that.wrap = Object.assign({}, that.wrap);
						}
					}
				})

			},

			// 获取商品信息
			getWrap() {
				// 商品id是否存在
				if (!that.id) return;

				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						table: 'goods',
						id: that.id,
					},
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 内容
							that.wrap = rs.data;

							// 获取默认地址
							that.getDefaultSite();
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 选择地址
			selSite() {
				// 跳转页面
				uni.navigateTo({
					url: '/pages/my/site/site?type=1',
				})
			},

			// 支付
			pay() {

				// 判断有无地址
				if (!that.wrap.address || !that.wrap.address.id) {
					// 弹窗提示
					that.alert('请选择地址');
					return;
				};
				if (!that.pays) {
					wx.requestSubscribeMessage({ // 调起消息订阅界面
						tmplIds: [
							'MAWwaJ4VESHVh5URWchQ8Xv-2D8-zldHaL1UtkyfSjw',
							'nwU8qKqKlQTAtlijuuOEF6RI5UyVz0xhlJXM4WQ1M_I'
						], //购买通知/+新订单通知
						success(res) {
							console.log('订阅消息 成功 ');
							console.log(res);
							that.pays = true
						},
						fail(er) {
							console.log("订阅消息 失败 ");
							console.log(er);
							that.pays = true
						}
					})
				}
				if (that.pays) {
					// 请求接口
					that.request({
						url: '/api/goods_order/create',
						// 上传数据
						data: {
							// 商品id
							goods_id: that.id,
							// 地址id
							user_address_id: that.wrap.address.id,
							// 数量
							num: that.num,
							// 备注
							remark: that.wrap.remark ? that.wrap.remark : ' ',
							
							type:'type',
						},
						// 调用成功
						success(rs) {
							console.log('订单信息', rs.data);
							that.orderid = rs.data
							// 返回成功
							if (rs.code == 1) {
								// 支付
								that.util.payment({
									url: "/api/goods_order/pay",
									data: {
										id: rs.data,
										platform: "wechatMini2"
									},
									success(rss) {
										// 赋值反选
										console.log(that.orderid);
										that.success = true;
										that.util.request({
											url: '/api/goods_order/suss',
											data: {
												orderid: that.orderid
											},
											success(r) {
												console.log(r);
											}
										})
										// 更改标题
										uni.setNavigationBarTitle({
											title: '下单成功',
										});
									},
									error() {
										// 弹窗提示
										that.alert('您已取消支付');

										// 半秒后执行
										setTimeout(() => {
											// 返回跳转
											uni.navigateBack();
										}, 1000);
									},
								})
							} else {
								//弹窗提示用户
								that.alert(rs.msg);
							}
						}
					})
				}

			},
		},
	};
</script>
<style>
	/* 备注 */
	.remark textarea {
		height: 150rpx;
	}
</style>
